<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
		*{margin:0px;padding:0px;}
		li{list-style:none;}
		#box{
			width:600px;
			height:350px;
			margin:30px auto;
			padding:15px;
			border:1px solid #ddd;
			border-radius:5px;
			box-shadow: 0px 0px 5px #ddd;
		}
		#box .list{
			width:100%;
			height:300px;
			overflow: hidden;
		}
		#box .list li{
			width:100%;
			height:24px;
			margin-top:6px;
			background:#ccc;
		}
	</style>
	<script type="text/javascript" src="jquery.js"></script>
	<script>
		$(function(){
			
				$('#box .list li').click(function(){
				/*	
						$(this).find('span').css({
							color:'red'
						})
				*/

						$(this).parents('div').css({
							background:'red'
						})
				})
		
		})
	</script>	
</head>
<body>

	<input type="button" value="点击" id="btn1">	

	<div id="box">
		<ul class='list'>
			<li><span>1111111111</span></li>
			<li><span>2222222222222222<span></li>
			<li><span>333333333333333<span></li>
			<li><span>444444444444444444<span></li>
			<li><span>55555555555555<span></li>
			<li><span>66666666666666<span></li>
			<li><span>7777777777777<span></li>
		</ul>	
	</div>	

	
</body>
</html>